window.onload=function(){
    var box=document.querySelector('.box');
    var imgLis=document.querySelectorAll('.img-list li');
    var indicatorLis=document.querySelectorAll('.indicator li');
    var prev=document.querySelector('.prev');
    var next=document.querySelector('.next');


    var index=0;

     function prevImg(){
            index=index==0?imgLis.length-1:index-1;
            console.log(index);
            showImg();
        }

    function nextImg(){
            index=index==imgLis.length-1? 0 : index+1;
            showImg();
        }


    function showImg(){
            for(var i=0;i<imgLis.length;i++){
                imgLis[i].className='';
                indicatorLis[i].className='';
            }
            console.log(index);
            imgLis[index].className='current';
            indicatorLis[index].className='active';
        }

        var timer=setInterval(nextImg,2000);

        for(var i=0;i<indicatorLis.length;i++){
            indicatorLis[i].index=i;
            indicatorLis[i].onmouseover=function(){
                // 鼠标进来,暂停自动切换
                clearInterval(timer);
                timer=null;
                // 根据鼠标选中的指示灯的索引来切换图片，并记录和更新index的值
                index=this.index;
                showImg();
            }
            indicatorLis[i].onmouseout=function(){
                // 鼠标出去，开始自动切换
                // if(timer) return;
                // if(timer!=null){
                //     return;
                // }
                timer=setInterval(nextImg,1000);
            }
        }

        // 3.点击按钮切换
        box.onmouseover=function(){
            clearInterval(timer);
            timer=null;
            prev.style.display='block';
            next.style.display='block';
        }
        box.onmouseout=function(){
            if(timer) return;
            timer=setInterval(nextImg,1000);
            prev.style.display='none';
            next.style.display='none';
        }
        // 点击 上一张
        prev.onclick=function(){
            prevImg();
        }
        // 点击 下一张
        next.onclick=function(){
            nextImg();
        }



        // 返回顶部
        var backtop = document.querySelector('.div-right .fhdb');
        backtop.onclick = function () {
           document.documentElement.scrollTop= document.body.scrollTop=0;
        }

        // 固定导航栏
    var nav=document.querySelector('.nav')
     window.onscroll=function(){
         
       
        if(document.scrollingElement.scrollTop>=127){
             //固定nav
            nav.style.position='fixed';
            nav.style.left='0';
            if(nav.style.top!=0){
                setTimeout(function(){
                    nav.style.top='0px';
                },100);
            }
        }
        else{
             nav.style.position='static';
             nav.style.top=-nav.offsetHeight+'px';
        }
     }
    var close = document.querySelector('.close');

    var id = document.querySelector('.id-div');
    var a = document.querySelector('.a-one');
    a.onmouseover = function(){
        id.style.left = -id.offsetWidth + 'px';
}
    a.onmouseout = function(){
        id.style.left = 0;
}
    close.onclick = function(){
    id.style.left = 0;
}



}